<el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  title="选择链接" class="dialogStyleBase maxHeight" width="1200px" :visible.sync="boxVisible" append-to-body
    :before-close="editBoxCancel">

    <div class="main">

        <div class="hh">
            <div @click="setSelectedIndex(index)" :class="'li '+(selectedIndex==index)" v-for="(item,index) in list">
                {{item.name}}</div>
            <div @click="setSelectedIndex(100)" :class="'li '+(selectedIndex==100)">装修页面</div>
            <div @click="setSelectedIndex(103)" :class="'li '+(selectedIndex==103)">商品详情</div>
            <div @click="setSelectedIndex(105)" :class="'li '+(selectedIndex==105)">门店分类</div>
            <div @click="setSelectedIndex(104)" :class="'li '+(selectedIndex==104)">客服链接</div>
            <div @click="setSelectedIndex(101)" :class="'li '+(selectedIndex==101)">自定义内链</div>
            <div @click="setSelectedIndex(102)" :class="'li '+(selectedIndex==102)">自定义外链</div>
            
        </div>
        <!-- 11{{selected}} -->
        <div class="mm" v-if="selectedIndex<100">
            <div class="sys">
                <div class="item" v-for="(item,index) in list[selectedIndex].children" @click="selectItem(item)">
                    <div class="ss">
                        <div class="icon true" v-if="item.toPath==selected.path"><i class="el-icon-check"></i></div>
                        <div class="icon false" v-else></div>
                    </div>
                    <div class="ll">
                        <div class="t1">{{item.name}}<span>{{item.tips}}</span></div>

                        <div class="t2">{{item.toPath}}</div>
                    </div>
                    <div class="rr">

                    </div>

                </div>
            </div>

        </div>



        <div class="mm" v-if="selectedIndex==103">
            <goodsList :appWindow="appWindow" @change="goodsListChange" :selected="selected"></goodsList>
        </div>
        <div class="mm" v-if="selectedIndex==105">
            <storeGroup :appWindow="appWindow" @change="storeGroupChange" :selected="selected"></storeGroup>
        </div>
        <div class="mm" v-if="selectedIndex==100">

            <desginTemplate @change="desginTemplateChange" :selected="selected" :appWindow="appWindow"></desginTemplate>

        </div>
        <div class="mm" v-if="selectedIndex==101">
            <div class="nei">

                <el-form label-position="left" label-width="80px" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="链接路径">
                        <el-input placeholder="请输入自定义内链链接（注：/开头 如/pages/index/index,不需加系统自维护参数，如sid等）"
                            v-model="selected.path">
                        </el-input>
                    </el-form-item>



                    <el-form-item label="创建参数">

                        <div>
                            <el-input style="width:200px" placeholder="参数名" v-model="query.name"></el-input>
                            <el-input style="width:200px;margin:0px 10px;" placeholder="参数值" v-model="query.value">
                            </el-input>
                            <el-button @click="addQuery()">添加</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="参数值">
                        <div class="query">
                            <div class="ul">
                                <div class="li li0">#</div>
                                <div class="li li1">参数名</div>
                                <div class="li li2">参数值</div>
                                <div class="li li3">操作</div>
                            </div>
                            <div class="ul" v-for="(item,key,index) in selected.query" :key="key">
                                <div class="li li0">{{index+1}}</div>
                                <div class="li li1">{{key}}</div>
                                <div class="li li2">{{item}}</div>
                                <div class="li li3"><span class="del" @click="delQuery(key)">删除</span>
                                </div>
                            </div>
                            <div class="ul" v-if="$vFN.Utils.isEmpty(selected.query)">
                                <div class="li li100">无参数</div>
                            </div>
                        </div>
                    </el-form-item>


                </el-form>



            </div>
        </div>
        <div class="mm" v-if="selectedIndex==102">
            <div class="wai">
                <el-input placeholder="请输入自定义外链链接" v-model="selected.path">
                    <template slot="append">
                        <div @click="openUrl()">试一试</div>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="mm" v-if="selectedIndex==104">
            <div class="wai">
                客服链接
                <el-button type="primary" v-if="selected.path=='ONLINE_CUSTOMER'">已选</el-button>
                <el-button @click="onlineCustomerClick" v-else>选择</el-button>
            </div>
        </div>

    </div>

    <div slot="footer">
        <el-row>
            <el-col :span="18" style="text-align: left;" v-if="selected.path">

                <el-select :disabled="selected.type==''" v-model="selected.type" placeholder="请选择链接"
                    style="width:120px;">
                    <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
                        <span style="display: inline-block; width:100px;">{{ item.label }}</span>
                        <span style="color: #8492a6; font-size: 12px; font-weight: normal;">{{ item.tips }}</span>
                    </el-option>
                </el-select>
                <span v-if="selected.type" class="footerLabel">【{{selected.name}}】跳转方式</span>
            </el-col>
            <el-col :span="6">
                <el-button @click="editBoxCancel()">取 消</el-button>
                <el-button type="primary" @click="submit()" :disabled="!selected.path">确定</el-button>
            </el-col>
        </el-row>





    </div>
</el-dialog>